<template>
  <page-wrapper>
    <b-card class="mb-16">
      <b-checkbox v-for="(item, index) in showList" :key="index" v-model="item.show">
        {{ item.title }}
      </b-checkbox>
    </b-card>
    <b-collapse-wrap v-if="showList[0].show" title="测试(打印文本)" collapse>
      <div class="p16">
        <b-button type="primary" @click="printClick">打印</b-button>
      </div>
    </b-collapse-wrap>
    <demo01 v-if="showList[1].show" :title="showList[1].title" />
    <demo02 v-if="showList[2].show" :title="showList[2].title" />
    <demo03 v-if="showList[3].show" :title="showList[3].title" />
    <demo04 v-if="showList[4].show" :title="showList[4].title" />
    <demo05 v-if="showList[5].show" :title="showList[5].title" />
  </page-wrapper>
</template>

<script setup>
defineOptions({ name: 'LodopDemo' })
import { ref } from 'vue'
import demo01 from './demo01.vue'
import demo02 from './demo02.vue'
import demo03 from './demo03.vue'
import demo04 from './demo04.vue'
import demo05 from './demo05.vue'

import { getLodop } from '@/plugins/lodop/LodopFuncs'

const showList = ref([
  { title: '00-基本用法', show: false },
  { title: '01-打印页面内容', show: false },
  { title: '02-代码打印卡片', show: false },
  { title: '03-套打内容', show: false },
  { title: '04-打印多页', show: false },
  { title: '05-控制样式', show: true },
])

function printClick() {
  const LODOP = getLodop()
  if (!LODOP) return
  LODOP.PRINT_INIT('拼版标识卡')
  LODOP.SET_PRINT_STYLE('FontSize', 16)
  LODOP.SET_PRINT_STYLE('Bold', 1)
  LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, 'A4') // 纸张方向大小
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 800, 800, '') // 演示设置各种样式的打印预览窗口：
  LODOP.ADD_PRINT_TEXT(0, 0, 200, 20, '我是要打印的文本') //然后多个ADD语句及SET语句
  // 直接打印
  // LODOP.PRINT()
  // 设计模式
  // LODOP.PRINT_DESIGN()
  LODOP.PREVIEW() // 打印预览
}
</script>

<style scoped></style>
